<template>
  <el-dialog v-model="dialogVisible" title="货物信息" width="800" draggable overflow :close-on-click-modal="false">
    <el-scrollbar v-loading="loadding" height="400px">
      <el-space fill wrap direction="vertical" style="width: 100%">
        <el-descriptions title="基础信息" label-align="right" :border="true">
          <el-descriptions-item label="货物名称">{{ productDetail.productName }}</el-descriptions-item>
          <el-descriptions-item label="货物描述">{{ productDetail.productDesc }}</el-descriptions-item>
          <el-descriptions-item label="品牌名称">{{ productDetail.brandName }}</el-descriptions-item>
          <el-descriptions-item label="分类">
            <template v-for="(category, index) in productDetail.categorys" :key="index">
              {{ category.names }}
              <br v-if="category !== productDetail.categorys[productDetail.categorys.length - 1]" />
            </template>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="参数信息" label-align="right" :border="true">
          <el-descriptions-item v-for="(attr, index) in productDetail.params" :key="index" :label="attr.paramName">
            {{ attr.paramValue }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="属性信息" :column="1" label-align="right" :border="true">
          <el-descriptions-item v-for="(attr, index) in productDetail.attrs" :key="index" :label="attr.name">
            {{ attr.value.map(v => v.attrValue).join(",") }}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="规格信息">
          <el-descriptions-item>
            <el-table :data="productDetail.specs" border stripe style="width: 100%">
              <el-table-column prop="sku" label="SKU" width="180" />
              <el-table-column prop="specName" label="规格名称" width="180" />
              <el-table-column v-for="(item, index) in productDetail.attrs" :key="index" :label="item.name">
                <template #default="scope">
                  {{ scope.row.productSpecAttrs.find(attr => attr.attrId === item.id)?.attrValue }}
                </template>
              </el-table-column>
              <el-table-column prop="quantity" label="库存" width="180" />
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </el-space>
    </el-scrollbar>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, shallowRef } from "vue";
import { getProductDetail } from "@/api/product/productApi";
import { errorMsg } from "@/utils/message";
const dialogVisible = ref(false);
const loadding = ref(true);
const productDetail = shallowRef<ShopProductDetailVo>({} as ShopProductDetailVo);
function show(id: number) {
  dialogVisible.value = true;
  getProductDetail(id).then(res => {
    if (res.code === RESPONSE_CODE.SUCCESS) {
      productDetail.value = res.data;
      loadding.value = false;
    } else {
      errorMsg("获取货物信息失败");
    }
  });
}
defineExpose({
  show
});
</script>
